<template>
	<view>
		<lee-linkage :list="dataList" @onGoodItem="onGoodItem">
      <template v-slot:custom="{row}">
        <view class="" v-for="(item,index) in row.foods">
          <uni-section style="background-color: chartreuse;" :title="item.name" type="circle">
            <uni-card :is-shadow="true" margin="0px" :is-full="true" padding="0px"
                      style="margin-bottom: 20px;">

              <image slot='cover' style="width: 100%;" :src="item.icon" @click="toClassifyDetail(item)">
              </image>
              <view slot='title'>
                <!-- <h3 style="color: #212cff;">{{item.name}}</h3> -->
								<text style="text-indent: 2em;" class="two-row-hide">{{item.descri}}</text>
							</view>
							<view slot="actions" class="card-actions">
								<view class="card-actions-item">
									<uni-icons type="undo" size="18" color="#999"></uni-icons>
									<text class="card-actions-item-text">分享</text>
								</view>
								<view class="card-actions-item">
									<uni-icons type="heart" size="18" color="#999"></uni-icons>
									<text class="card-actions-item-text">点赞</text>
								</view>
								<view class="card-actions-item">
									<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
									<text class="card-actions-item-text">评论</text>
								</view>
							</view>
						</uni-card>
					</uni-section>
				</view>
			</template>
		</lee-linkage>

	</view>
</template>

<script>
import leeLinkage from '@/components/linkage/linkage.vue'
import WaterfallLazyImage from '@/components/waterfall-lazy-image/waterfall-lazy-image.vue'
import {
  fileBaseUrl
} from '../../config/config'

export default {
  mixins: [],

  data() {
    return {
      column: 3,
      columnMarginTop: 15,
      columnWidth: 230,
      photoList: [],
      selectList: [],
				isRefreshList: false,
				show: 2, //1默认，2自定义插槽
				dataList: [],

			};
		},
		components: {
			WaterfallLazyImage,
			leeLinkage
		},
		computed: {},
		methods: {


		},
		onLoad(options) {
			this.getPage()
		},
		onShow() {
			this.getClassifyAll()
		},
		/**
		 * 滚动加载更多
		 */
		onReachBottom() {
			if (this.hasMore && !this.isLoading) {
				this.pageIndex++
				//this.getPage();
			}
		},
		methods: {
			getClassifyAll() {
				this.$api.compilationClassifyAll().then(res => {
          this.dataList = res.data
          //处理图片展示
          this.dataList.forEach(classify => {
            classify.foods.forEach(compilation => {
              // console.info(compilation)
              compilation.icon = fileBaseUrl + compilation.icon
            })
          })
        })
			},
			toClassifyDetail(item) {
				console.info(item)
				uni.navigateTo({
					url: '/pages/compilation/compilationDetail/CompilationDetail?compilationId=' + item.cat
				})
			},

			onGoodItem(item) {
				console.log(item);
				uni.showToast({
					title: `点击了 ${item.name}`,
					icon: 'none'
				})
			},
			/**
			 * 分页获取
			 */
			getPage() {

      },
			/**
			 * 点击图片回调
			 */
			handleImageClick(item) {
				console.log(item);
			},
			/**
			 * 更新页面数据
			 */
			refreshPage() {
				this.isRefreshList = !this.isRefreshList
			},
		},
	}
</script>

<style>
	.waterfall-content {
		padding-top: 15rpx;
		width: 720rpx;
		margin: 0 auto;
	}

	.more {
		font-size: 30rpx;
		text-align: center;
	}

	page {
		background: #eee;
	}

	.container {
		overflow: hidden;
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.cover-image {
		flex: 1;
		height: 150px;
	}

	.no-border {
		border-width: 0;
	}

	/*文字超出两行省略*/
	.two-row-hide {
		white-space: normal;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		line-clamp: 5;
		-webkit-box-orient: vertical;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 10px;
	}

	.uni-text {
		font-size: 14px;
		line-height: 22px;
		color: #333;
	}
</style>
